@import './variables.scss';
@import './reset.scss';
@import './markdown.scss';
* {
  box-sizing: border-box;
  outline: none;
}

@each $key, $val in $font-sizes {
  .fs-#{$key} {
    font-size: $val;
  }
}

@each $key, $val in $colors {
  .text-#{$key} { // ${} 用于拼接变量
    color: $val;
  }
  .bg-#{$key} {
    background-color: $val;
  }
}
// 所有的间距
@each $Tkey, $Tval in $space-types {
  @each $Skey, $Sval in $space-sizes {
    .#{$Tkey}-#{$Skey} {
      #{$Tval}: $Sval;
    }
  }
  @each $Skey, $Sval in $space-sizes {
    .#{$Tkey}x-#{$Skey} {
      #{$Tval}-left: #{$Sval};
      #{$Tval}-right: #{$Sval};
    }
    .#{$Tkey}y-#{$Skey} {
      #{$Tval}-top: #{$Sval};
      #{$Tval}-bottom: #{$Sval};
    }
  }
  @each $Dkey, $Dval in $space-directions {
    @each $Skey, $Sval in $space-sizes {
      .#{$Tkey}#{$Dkey}-#{$Skey} {
        #{$Tval}-#{$Dval}: $Sval;
      }
    }
  }
}

@each $key in (left, center, right) {
  .t-#{$key} {
    text-align: $key;
  }
}

.d-flex {
  display: flex;
}

.f-wrap {
  flex-wrap: wrap;
}

.f-column {
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

@each $key, $val in $flex-jc {
  .jc-#{$key} {
    justify-content: $val;
  }
}

@each $key, $val in $flex-ai {
  .ai-#{$key} {
    align-items: $val;
  }
}


.container {
  width: 1030px;
  margin: 0 auto
}
@media screen and(max-width:600px) {
  .container {
    width: 100vw;
    .content {
      width: 100%;
      padding-left: 12px;
      .reco-item-wrap {
        li {
          width: 50% !important;
        }
      }
    }   
  }
  .articleTime {
    display: none;
  }
  .articleLike {
    display: none;
  }
  .phone-footer {
    flex-direction: column;
    text-align: center;
    img{
      margin: 0 auto;
    }
  }
  .right {
    display: none;
  }
  .pc-header {
    display: none;
  }
}
@media screen and(min-width:601px) {
  .phone-header {
    display: none;
  }
}
.pc-header {
  background: #fff;
}
.phone-footer {
  background: #fff;
}
.content {
  padding-right: 12px;
  width: 75%;
}

.right {
  width: 25%;
  padding-left: 12px;
}

.btn {
  width: 64px;
  height: 32px;
  border: none;
  border-radius: 4px;
  background:map-get($colors, 'main-color');
  cursor: pointer;
}

.float-r{
  float: right;
}

img {
  display: block;
  font-size: 0;
}

.cur {
  cursor: pointer;
}

.w100 {
  width: 100%;
}